<template>
    <div class="cx">
        <el-drawer title="新增模板" v-model="open" @close="closeDialog" size="80%" :close-on-click-modal="false">
            <div class="body-main-container">
                <div class="main-container-content">
                    <leftFrom></leftFrom>
                    <centerFrom ref="rightFromRef"></centerFrom>
                    <rightFrom></rightFrom>

                </div>
            </div>
            <template #footer>
                <div class="dialog-footer" style="text-align: center">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script setup name="addEdit">
import leftFrom from "./leftFrom.vue";
import centerFrom from "./centerFrom.vue";
import rightFrom from "./rightFrom.vue";
import { debounce, deepClone } from "@/utils/index";
import { ref } from "vue";
const { proxy } = getCurrentInstance();
const emit = defineEmits(["refresh"]);
const rightFromRef = ref();
const data = reactive({
    TemList: [
        {
            name: "姓名",
            type: "input",
        },
        {
            name: "姓别",
            type: "select",
        }
    ],
    open: true,


});
const { open, } = toRefs(data);
const changeUser = debounce(function (event) {
    search();
}, 500);
const search = () => {
    console.log(2);
};
 
// 提交按钮
const submitForm = () => {
    rightFromRef.value.okFrom()
};
const openDialog = async (upData) => {

}

// 关闭
const closeDialog = () => {
    cancel();
};
/** 取消按钮 */
const cancel = () => {
    open.value = false;
};
 
// 暴露变量
defineExpose({
    openDialog,
});
</script>
<style lang="scss" scoped>
.main-container-content {
    display: flex;
    height: 100%;
}
</style>
